<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<style scoped lang="scss">
.rule-input ::v-deep {
  .el-input__inner {
    border: 0;
    border-radius: 0px;
    width: 300px;
    &:focus {
      border-bottom: 1px solid #409eff;
    }
  }
};
.table .el-input {
  display: none;
}
.current-cell .el-input {
  display: block;
}
.current-cell .el-input + span {
  display: none;
}
</style>
<template>
      <div class="app-container">
        <p class="cont-tit">基础信息</p>
<!--        <p>货品明细</p>-->

        <el-form ref="form" :model="form" label-width="120px" :inline="true">
          <el-form-item label="采购部门:" prop="deptName">
            <el-select size="small" placeholder="请选择采购部门" class="rule-input" v-model="form.deptName" clearable>
              <el-option
                v-for="item in departments"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采购主体:" prop="org">
            <el-select placeholder="请选择采购主体" size="small" class="rule-input" clearable v-model="form.org">
              <el-option
                v-for="item in orgs"
                :key="item.guid"
                :label="item.name"
                :value="item.guid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="入库库房:" prop="stroom">
<!--            <el-input aria-placeholder="请选择采购主体" size="small" class="rule-input"/>-->
            <el-select placeholder="请选择入库库房" size="small" clearable v-model="form.stroom" class="rule-input">
              <el-option
                v-for="item in sRooms"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采购类型:" prop="type">
<!--            <el-input aria-placeholder="请选择采购主体" size="small" class="rule-input"/>-->
            <el-select placeholder="请选择采购类型" size="small" clearable v-model="form.type" class="rule-input">
              <el-option
                v-for="dict in types"
                :key="dict.dictCode"
                :label="dict.dictLabel"
                :value="dict.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商:" prop="supplier">
<!--            <el-input aria-placeholder="请选择采购主体" size="small" class="rule-input"/>-->
            <el-select placeholder="请选择供应商" size="small" clearable class="rule-input" v-model="form.supplier">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
<!--            <el-input aria-placeholder="请选择采购主体" size="small" class="rule-input"/>-->
            <el-form-item label="采购时间" prop="time">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.time" type="date" value-format="yyyy-MM-dd" placeholder="请选择采购日期">
              </el-date-picker>
            </el-form-item>

          <el-form-item label="备注:" prop="">
            <el-input placeholder="请输入备注" size="small" class="rule-input"/>
          </el-form-item>
<!--          <el-form-item label="附件上传:" prop="">-->
<!--&lt;!&ndash;            <el-input aria-placeholder="请选择采购主体" size="small" class="rule-input"/>&ndash;&gt;-->
<!--            <el-upload-->
<!--              disabled-->
<!--              class="upload"-->
<!--              :headers="upload.headers"-->
<!--              action="/prod-api/common/upload"-->
<!--              :on-preview="handlePreview2"-->
<!--              :on-remove="handleRemove"-->
<!--              :before-remove="beforeRemove"-->
<!--              :on-success="handleUpload"-->
<!--              :file-list="fileList"-->
<!--            >-->
<!--            </el-upload>-->
<!--            <el-popover-->
<!--              placement="right"-->
<!--              title=""-->
<!--              width="60"-->
<!--              :offset="popoverOffset"-->
<!--              popper-class="ppover"-->
<!--              trigger="click">-->
<!--              <div slot>-->
<!--                <el-tag @click="viewFile" style="margin-right:10px;cursor: pointer;">预览</el-tag>-->
<!--                <el-tag @click="downFile(currFile.url, currFile.name)" type="info" style="cursor: pointer;">下载</el-tag>-->
<!--              </div>-->
<!--              <div class="hander" slot="reference" id="world2"></div>-->
<!--            </el-popover>-->

<!--          </el-form-item>-->
          <br>
          <el-form-item>

          </el-form-item>
        </el-form>

        <el-button @click="add">添加</el-button>

        <el-form ref="formA" :model="formA" :rules="rules">
          <el-table ref="tableData" :data="formA.tableData" @cell-click="cellClick" style="width: 100%;" >
            <el-table-column prop="productType" label="产品类型" width="270" >
              <template slot-scope="scope">
<!--                <el-input size="small" ref="tableInput" v-model="scope.row.name"></el-input>-->
<!--                <span>{{ scope.row.name }}</span>-->
                <el-form-item :prop="'tableData.'+scope.$index+'.productType'" :rules="rules.productType">
                <el-select size="small" v-model="scope.row.productType" style="line-height: 30px;height: 28px">
                  <el-option
                    v-for="item in productTypes"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                    @click.native="getSpec($event, null,scope.$index,item)"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="product" label="产品" width="270">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.'+scope.$index+'.productguid'" :rules="rules.product">
                <el-select size="small" v-model="scope.row.productguid" style="line-height: 30px;height: 28px">
                  <el-option
                    v-for="item in productList"
                    :key="item.guid"
                    :label="item.productname"
                    :value="item.guid"
                    @click.native="getSpec($event, item,scope.$index,null)"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="spec" label="物料规格" width="270">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.'+scope.$index+'.spguid'" :rules="rules.spec">
<!--                <el-input size="small" ref="tableInput" v-model="scope.row.spec" @blur="removeClass(scope.row.remark, scope.$index, scope.row)"></el-input>-->
                <el-select size="small" v-model="scope.row.spguid" style="line-height: 30px;height: 28px">
                  <el-option
                    v-for="item in specList"
                    :key="item.guid"
                    :label="item.name"
                    :value="item.guid"
                    @click.native="specChange($event, item,scope.$index)"
                  />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="count" width="270">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.'+scope.$index+'.count'" :rules="rules.count">
                <el-input size="small" placeholder="请输入数量" v-model="scope.row.count" style="width: 200px;line-height: 30px;height: 28px"/>
                <p style="float: right;margin-top: 0;margin-right: 25px" v-model="scope.row.unitName">{{ scope.row.unitName }}</p>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="price" width="270">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.'+scope.$index+'.price'" :rules="rules.price">
              <el-input size="small" placeholder="请输入单价" v-model="scope.row.price" style="width: 200px;line-height: 30px;height: 28px"/>
              <p style="float: right;margin-top: 0;margin-right: 15px" v-model="scope.row.unitName" v-if="scope.row.unitName">元/{{ scope.row.unitName }}</p>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button @click="del(scope.$index)" style="margin-top: 0px">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
<!--        <el-button type="primary" @click="submitData">提交</el-button>-->

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitData">提 交</el-button>
          <el-button style="margin-left: 40px;margin-top: 25px">保存</el-button>
<!--          <el-button @click="cancelCon">取 消</el-button>-->
        </div>
      </div>
</template>

<script>
  import FlowNode from '@/components/FlowNode/index'
  import { getPurchasebill } from "@/api/purchase/purchase";
  import {getDepartment,getOrg,getSr,getType,getSupplier,getProductType,getProduct,getSpecs,save,getPurchaseList} from '@/api/purchase/addPurchase'
  import {findProductList,findSpecificationList} from '@/api/public'
  import { getToken } from '@/utils/auth'


  let qs = require('qs');
    export default {
        name: 'addPurchaseInfo',
        data () {
            return {
              loading: false,
              flowid: 26,
              id : '',
              form: {},
              isReady: false,
              //采购部门列表
              departments:[],
              orgs:[],
              sRooms:[],
              types:[],
              suppliers:[],
              productTypes:[],
              productList:[],
              specList:[],
              stockunit:'',
              formA:{tableData:[{},
                  {}]},
              // tableData: [{
              //   // unitName:''
              //   // date: '2016-05-02',
              //   // name: '王小虎',
              //   // address: '上海市普陀区金沙江路 1518 弄'
              // },{
              //
              // }
              // ],
              upload: {
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
              },
              fileList: [],
              popoverOffset: 0,
              currFile: {},
              rules:{
                productType:[{required:true,message:"产品类型不能为空",trigger:'blur'}],
                product:[{required:true,message:"产品不能为空",trigger:'blur'}],
                spec:[{required:true,message:'物料规格不能为空',trigger:'blur'}],
                count:[{required:true,message:'数量不能为空',trigger:'blur'}],
                price:[{required:true,message:'单价不能为空',trigger:'blur'}]
              }

            }
        },
        components: {
          FlowNode,
        },
      created() {
            let that = this;
            this.id = this.$route.query.id;
        this.getDepartments();
        this.getOrgs();
        this.getTypes();
        this.getSuppliers();
        this.getProductTypes();
        this.getProductList();
        // this.getPurchase()
        },
      watch:{
          'form.org':function(val,oldVal){
            this.getSRooms(val);
          },
        'tableData.productType':function(val,oldVal){
            this.getProductList(val)
        },
        'tableData.spec':function(val,oldVal){
          console.log(val,oldVal)
        }

      },
        methods: {
          // viewFile() {
          //   if (this.currFile.url) {
          //     let url = `http://${location.host}/prod-api${this.currFile.url}`;
          //     window.open(url);
          //   }
          // },
          // handleUpload(response, file, fileList) {
          //   console.log('response：', response)
          //   if (response.code == 200) {
          //     this.fileList.push({id: response.id, name: response.originalName, url: response.fileName});
          //   }
          // },
          // beforeRemove(file, fileList) {
          //   console.log(111)
          //   return this.$confirm(`确定移除 ${ file.name }？`);
          // },
          // handleRemove(file, fileList) {
          //   this.fileList = this.fileList.filter(item => {
          //     return item.id != file.id;
          //   });
          // },
          // handlePreview2(file) {
          //   //弹出预览、下载
          //   setTimeout(() => {
          //     var e = document.createEvent('MouseEvents')
          //     e.initEvent('click', true, true)
          //     document.getElementById('world2').dispatchEvent(e)
          //   }, 0)
          //   //判断点击的第几个文件
          //   this.currFile = file;
          //   let index = 0;
          //   this.fileList.forEach((item, i) => {
          //     if (item.id == this.currFile.id) {
          //       index = i;
          //     }
          //   })
          //   //移动弹出框到指向点击文件
          //   setTimeout(() => {
          //     this.popoverOffset = (this.fileList.length - 1 - index) * 35;
          //     let ppover = document.getElementById('world2');
          //     ppover.style.marginTop = `${-this.popoverOffset}px`;
          //     this.$forceUpdate();
          //   }, 0)
          // },
          // productTypeData:


          // getPurchase(){
          //   getPurchaseList({ purchaseguid: '2d909a840db34cd3b1dd6b279d10589e' }).then(response=>{
          //     this.formA.tableData=response.rows;
          //
          //
          //     this.formA.tableData.index
          //     // for (let i = 0; i < this.formA.tableData.length; i++) {
          //     //
          //     //
          //     // }
          //   })
          // },
          specChange(event,item,index){
            let data=this.formA.tableData[index];
            data.unitName=item.stockunit;
            // console.log("data:",data)
            // console.log("index:-",index)
            this.formA.tableData.splice(index,1,data)

          },
          getSpec(event, productItem ,index,typeItem){
            // this.specList.splice(0,this.specList.length)
            // this.specList.length=0;
            console.log(this.formA.tableData[index].productType)
            // console.log("name:"+productItem,index)
            // console.log(productItem)
            let type;
            let productguid;
            if (productItem){
              productguid=productItem.guid;
              if (this.formA.tableData[index].productType){
                type=this.formA.tableData[index].productType
              }else {
                return
              }
            }
            if (typeItem){
              type=typeItem.dictValue;
              if (this.formA.tableData[index].product){
                productguid=this.formA.tableData[index].product
              }else {
                return
              }
            }
            let data={
              productGuid:productguid,
              type:type,
              stats:1
            }
            getSpecs(data).then(response=>{
                this.specList=response.data;
            })
            // findSpecificationList(data).then(response=>{
            //   this.specList=response.data;
            //   console.log(this.specList)
            // })
          },
          getProductList(val){
            val='2,5';
            getProduct(val).then(response=>{
              this.productList=response.data
              // console.log(this.productList)
            })
          },
          add(){
            this.formA.tableData.push({},);
            // this.formA.tableData.length=this.formA.tableData.length+1;
          },
          del(index){
            console.log("index:----",index)
            this.formA.tableData.splice(index,1)
            // this.formA.tableData.length=this.formA.tableData.length-1;
          },

          cellClick(row, column, cell, event) {
            for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){
              document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
            }
            cell.classList.add("current-cell");
          },
          removeClass(data, index, row){
            document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
          },

          getProductTypes(){
            getProductType().then(response=>{
              this.productTypes=response.data
            })
          },
          getSuppliers(){
            getSupplier().then(response=>{
              this.suppliers=response.data;
            })
          },
          getTypes(){
            getType().then(response=>{
              this.types=response.data;
            })
          },
          getSRooms(val){
            let data={
              enable:1,
              guid:val
            }
            getSr(data).then(response=>{
              this.sRooms=response.data;
            })
          },
          getOrgs(){
            getOrg().then(response=>{
              this.orgs=response.data;
            })
          },
          getDepartments(){
            let data={
              code:48
            }
            getDepartment(data).then(response=>{
              this.departments=response.data
            })
          },
          getOrder: function (id) {
            let that = this;
            getPurchasebill(id).then(response => {
                this.loading = false;
                if (response.code == 200) {
                  this.form = response.data;
                  console.log('this.form:', this.form)
                  this.isReady = true;
                } else {
                    this.msgError('系统错误');
                }
              });
          },
          submitData(){
            this.$refs['formA'].validate(valid=>{
              if (valid){
                save(this.formA.tableData).then(response=>{

                })
              }
            })
          }
        }
    }
</script>
